<template>
  <div class="box">
    <van-nav-bar title="彩虹屁生成器" @click-left="onClickLeft" left-arrow />

    <div class="header">
      <img src="./img/ch.png" alt="" />
    </div>
    <div class="shuru">
      <p>请选择你的彩虹屁生成对象</p>
      <div class="a1">
        <span>好友</span>
        <span class="qq">恋人</span>
        <span>长辈</span>
      </div>
      <div class="a2">
        <input type="text" name="" id="" placeholder="请输入Ta的名字" />
      </div>
    </div>

    <router-link class="xiao" tag="div" to="">立即生成</router-link>

    <div class="ber">
      <div class="fy">
        <van-icon name="guide-o" size="50" color="#ec9fc3" />
      </div>
      <router-link class="fx" tag="span" to="">分享好友</router-link>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.box{
  width: 100%;
  // background-color: #fbdae5;
  background-image: url("./img/bj.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .van-nav-bar {
    background-color: #fbdae500;
  }
  .van-nav-bar__text {
    color: white;
  }
  .van-nav-bar__title {
    color: white;

    font-size: 32px;
    text-align: left;
    font-family: PingFangSC-regular;
    // margin-top: 80px;
    line-height: 88px;
  }
  .van-icon-arrow-left {
    color: white;
    font-size: 48px;
  }

  .header {
    width: 558px;
    height: 120px;
    line-height: 40px;
    background-color: rgba(128, 128, 128, 0);
    text-align: center;
    margin: 424px 0 96px 96px;
    margin-top: 200px;
   
    img {
      width: 558px;
      height: 120px;
      opacity:0.5
    }
  }
  .shuru {
    width: 670px;
    height: 462px;
    border-radius: 16px;
    background-color: white;
    margin: 50px 0 40px 40px;
    display: flex;
    flex-wrap: wrap;
    align-self: center;
    justify-content: center;
    // justify-content: space-evenly;
    p {
      margin-top: 50px;
      color: #c18ca8;
      font-size: 32px;
      // text-align: left;
      font-family: PingFangSC-regular;
    }
    .a1 {
      width: 468px;
      display: flex;
      justify-content: space-evenly;
      margin-top: 30px;
      .qq {
        background-image: linear-gradient(to bottom right, pink, #DFB3D4,#B1D3E3,#F8D0B9);
    

      }
      span {
        width: 120px;
        height: 58px;
        // background: white;
        background-color: #f7f8fa;
        text-align: center;
        line-height: 58px;
        font-size: 32px;
        border-radius: 10px;
      }
    }
    .a2 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 546px;
      height: 120px;
      // line-height: 120px;
      border-radius: 60px;
      background-color: white;
      text-align: center;
      border: 4px solid #ec9fc3;
      text-align: center;
      input {
        border: none;
        border-radius: 25%;
        outline: medium;
        font-size: 40px;
        text-align: center;
        border: 0;
        outline: none;
        // border: #ec9fc3 1px sl;

        // border-bottom: 1px solid #000;
      }
    }
  }
  .xiao {
    width: 406px;
    height: 120px;
    line-height: 120px;
    border-radius: 60px;
    background-color: #fda5e2;
    text-align: center;
    margin: 34px 0 174px 170px;
    color: white;
    font-size: 32px;
  }
  .ber {
    margin: 150px 0 100px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    // justify-content: space-evenly;

    // .fy {
    //   width: 80px;
    //   height: 80px;
    // }
    .fx {
      font-size: 30px;
      color: #FF6CA4;
      // margin-top: 16px;
      // margin-left: 10px;
    }
  }
}
</style>
